<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/art-template(1).js"></script>
    <script src="./js/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .content {
            width: 1000px;
            margin: 0 auto;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        li {
            width: 23%;
            height: 300px;
            border: 1px solid #000;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        li img {
            width: 80%;
        }
    </style>
</head>

<body>
    <h1>home页面</h1>
    <div class="content"></div>
    <!-- 定义一个模板 -->
    <script id="list" type="text/html">
        <ul>
            {{each data as item}}
            <li>
                <img src="{{item.url}}" alt="">
                <h3>{{item.title}}</h3>
                <p>{{item.desc_1}}</p>
                <p>价格: <span>{{item.price}}</span> 元  <button idd={{item.id}}>购物车</button></p>
            </li>
            {{/each}}
        </ul>
    </script>
    <script>
        // 页面打开后直接获取xiaomi数据库中xiao_mi这个表格中的所有数据
        // 与模板结合
        // 渲染在页面上

        fetch("/homelist").then((data) => {
            // return data.test();
            return data.json();
        }).then((res) => {
            // console.log(res); //{success:1,data:[]}
            var text = template("list", res)
            document.querySelector(".content").innerHTML = text;

        })


        $(".content").on("click", "button", function () {
            // console.log($(this).attr("idd"));
            var idd = $(this).attr("idd"); //获取当前点击商品的id值
            fetch(`/homeshop?id=${idd}`).then((data) => {
                return data.json();
            }).then((res) => {
                console.log(res);
            })
        })

        // var xhr = new XMLHttpRequest();
        // xhr.open("get","/homelist");
        // xhr.send();
        // xhr.onreadystatechange = function(){
        //     if(xhr.readyState == 4){
        //         console.log(xhr.responseText); //是一个json字符串
        //     }
        // }


    </script>
</body>

</html> 